import Nabar from '../../conpoment/Nabar';
import img from './img/image.png'
import styles from './index.module.css';

function Index() {
  const activeTab = 'medicine';

  // 处方数据
  const prescriptionData = {
    registrationNo: '20200101001598Z',
    patientName: '王小柯',
    department: '门诊外一科',
    doctor: '刘医师',
    prescriptionTime: '2020-01-01 10:20:36',
    medicine: {
      prescriptionNo: '20200101032',
      notice: '请前往一楼门诊药房2号窗口取药',
      items: [
        { name: '葆宫止血颗粒', quantity: '3盒', price: '50.13' },
        { name: '维生素B1', quantity: '2瓶', price: '20.00' },
        { name: '维生素B2', quantity: '2瓶', price: '10.00' },
        { name: '维生素E', quantity: '2瓶', price: '10.00' },
        { name: '维生素C', quantity: '2瓶', price: '10.00' }
      ]
    },
    examinations: [
      {
        id: 1,
        notice: '请前往门诊三楼放射科进行检查',
        orderNo: '20200101133',
        items: [
          { name: 'CT', price: '200.00' },
          { name: '上腹部CT平扫', price: '220.00' }
        ]
      },
      {
        id: 2,
        notice: '请前往门诊四楼彩超室科进行检查',
        orderNo: '20200101134',
        items: [
          { name: '腹部彩超', price: '200.00' }
        ]
      }
    ]
  };
  // 计算总金额
  const medicineTotal = prescriptionData.medicine.items.reduce((sum, item) => sum + parseFloat(item.price), 0);
  const examinationTotal = prescriptionData.examinations.reduce((sum, exam) => 
    sum + exam.items.reduce((examSum, item) => examSum + parseFloat(item.price), 0), 0
  );
  const totalAmount = medicineTotal + examinationTotal;
  return (
    <div className={styles.container}>
      {/* 顶部导航栏 */}
      <Nabar title="导诊详情" sticky={false} />
      {/* 二维码区域 */}
      <div className={styles.barcodeSection}>
        <div className={styles.barcodeContainer}>
          <img src={img} alt="" />
          <div className={styles.barcodeNumber}>{prescriptionData.registrationNo}</div>
          <div className={styles.barcodeInstruction}>取药或检查时请出示此码</div>
        </div>
      </div>
      {/* 缴费信息 */}
      <div className={styles.paymentInfo}>
        <h3 className={styles.sectionTitle}>缴费信息</h3>
        <div className={styles.infoList}>
          <div>
            <span>登记号:</span>
            <span style={{marginLeft: '10px'}}>{prescriptionData.registrationNo}</span>
          </div>
          <div >
            <span>就诊人:</span>
            <span style={{marginLeft: '10px'}} >{prescriptionData.patientName}</span>
          </div>
          <div >
            <span>就诊科室:</span>
            <span style={{marginLeft: '10px'}}>{prescriptionData.department}</span>
          </div>
          <div >
            <span>开单医生:</span>
            <span style={{marginLeft: '10px'}}>{prescriptionData.doctor}</span>
          </div>
          <div >
            <span>开单时间:</span>
            <span style={{marginLeft: '10px'}}>{prescriptionData.prescriptionTime}</span>
          </div>
        </div>
      </div>
      {/* 项目明细 */}
      <div className={styles.itemDetails}>
        <h3 className={styles.sectionTitle}>项目明细</h3>
        
        {/* 药品部分 */}
        <div className={styles.medicineSection}>
          {/* 取药提示 */}
          <div className={styles.pickupNotice}>
            {prescriptionData.medicine.notice}
          </div>

          {/* 标签页 */}
          <div className={styles.tabContainer}>
          
            <div className={styles.prescriptionNo}>
              处方号 ({prescriptionData.medicine.prescriptionNo})
            </div>
          </div>

          {/* 药品列表 */}
          <div className={styles.medicineList}>
            {prescriptionData.medicine.items.map((item, index) => (
              <div key={index} className={styles.medicineItem}>
                <div className={styles.medicineInfo}>
                  <div className={styles.medicineName}>{item.name}</div>
                  <div className={styles.medicineQuantity}>×{item.quantity}</div>
                </div>
                <div className={styles.medicinePrice}>¥{item.price}</div>
              </div>
            ))}
          </div>
        </div>
        {/* 检查项目部分 */}
        {prescriptionData.examinations.map((exam) => (
          <div key={exam.id} className={styles.examinationSection}>
            {/* 检查提示 */}
            <div className={styles.examinationNotice}>
              {exam.notice}
            </div>

            {/* 标签页 */}
            <div className={styles.tabContainer}>
              <div className={styles.tab}>
                查
              </div>
              <div className={styles.prescriptionNo}>
                检查单号 ({exam.orderNo})
              </div>
            </div>

            {/* 检查项目列表 */}
            <div className={styles.medicineList}>
              {exam.items.map((item, index) => (
                <div key={index} className={styles.medicineItem}>
                  <div className={styles.medicineInfo}>
                    <div className={styles.medicineName}>{item.name}</div>
                  </div>
                  <div className={styles.medicinePrice}>¥{item.price}</div>
                </div>
              ))}
            </div>
          </div>
        ))}
        {/* 总计 */}
        <div className={styles.totalAmount}>
          <span className={styles.totalLabel}>合计:</span>
          <span className={styles.totalValue}>¥{totalAmount.toFixed(2)}</span>
        </div>
      </div>
    </div>
  );
}
export default Index;